<template>
    <div class="search-container">
        <div class="button" @click="handleClick">+</div>
        <div class="input">
            <input type="text" placeholder="请输入关键字....."
            @keyup="search">
        </div>
    </div>
</template>

<script setup>
    import { inject,watch } from 'vue'
    import _ from 'lodash'
    const { setIsShow } = inject('dialog-visible')
    // const { setUrl } = inject('dialog-url')
    const handleClick = () => {
        // setUrl('')
        setIsShow(true)
    }
    
    

    const emit = defineEmits(['update:act'])


    const props  = defineProps(['action'])
    watch(() => props.action,(newValue,oldValue) => {

        if(newValue === 'add') {
            handleClick()
            emit('update:act','')
            
            console.log(props.action)
        }
    })

    const { setKeywords,keywords } = inject('searchbar-keywords')


    //防抖动
    const search = _.debounce((e) => {
        setKeywords(e.target.value)
    },500)


</script>

<style lang="scss" scoped>
    .search-container {
        height: 60px;
        background-color: #d3d3d3;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 10px;
    }
    .button {
        width: 40px;
        height: 40px;
        background-color: #1e90ff;
        border-radius: 5px;
        font-size: 30px;
        font-weight: bold;
        color: #fff;
        text-align: center;

        &:hover {
            cursor: pointer;
        }
    }
    .input {
        flex: 1;
        height: 36px;
        padding: 0 10px;
        line-height: 36px;
        
        input {
            height: 100%;
            width: 100%;
            outline: none;
            border-radius: 5px;
            padding: 0 10px;
        }
    }
</style>